<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.all.js}"></script>
</head>
<body>


<style type="text/css">
    .layui-table-cell {
        text-align: center;
        height: auto;
        white-space: normal;
    }

    .layui-table img {
        max-width: 300px
    }
</style>

<table class="layui-hide" id="table" lay-filter="rugeEvent"></table>

<script>
    layui.use('table', function () {
        var table = layui.table;
        var oldUrl = window.location.href;
        var newUrl = oldUrl.replace("searchresult", "novel");
        table.render({
            elem: '#table'
            , url: newUrl
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [
                [
                    {field: 'id', title: 'id', hide: true}
                    , {
                    field: 'novelCover',
                    width: 200,
                    title: '小说封面',
                    templet: '<div><img src="{{ d.novelCover }}"></div>'
                }
                    , {field: 'novelName', title: '小说名称', templet: '#tmpName'}
                    , {field: 'novelAuthor', title: '小说作者'}
                    , {field: 'novelType', title: '小说类型'}
                    , {field: 'novelURL', title: '小说URL'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    , {field: 'novelDesc', title: '小说简介', event: 'showDesc',id: 'novelDesc'}
                    , {field: 'novelStatus', title: '小说状态'}
                    , {field: 'lastTime', title: '最近更新时间'}
                    , {field: 'lastChapter', title: '最新章节'}
                    , {field: 'lastURL', title: '最新章节URL'}
                    , {field: 'sourceName', title: '小说源id'}
                ]
            ]
        });

    });
</script>
<script type="text/html" id="tmpName">
    <a href="javascript:void(0)" id="novelURL" class="layui-table-link" onclick="subgo()">{{ d.novelName }}</a>
</script>
<script>
    function subgo() {
        layui.use('table', function () {
            var table = layui.table;
            //监听行单击事件
            table.on('row(rugeEvent)', function (obj) {
                var keyword = $('#keyword').val();
                window.location.href = "/chapter/" + obj.data.id;
            });
            // 监听单元格事件
            table.on('row(rugeEvent)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                alert(obj);
                console.log(obj);
                return;
                if (event == 'showDesc') {
                    layer.tips(data.novelDesc, '#novelDesc', {
                        tips: [2, '#78BA32']
                    });
                }
            });
        });
    };
</script>
</body>
</html>